html {
  overflow-y: scroll;
}

body {
  width: 100vw;
  overflow: hidden;
}

:root {
  --wall-item-height: 90px;
  --wall-item-width: 160px;
  --wall-item-number: 9;
  --duration: 20s;
overflow-y: auto;
overflow-x: hidden;
}
:root body {
  position: absolute;
}
@keyframes scrolling {
  to {
    transform: translateX(calc(var(--wall-item-width) * -1));
  }
}
.wall {
  margin: 30px auto;
  height: var(--wall-item-height);
  width: 80vw;
  position: relative;
  mask-image: linear-gradient(90deg, hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0));
}
.wall .wall-item {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(calc(160px * 9));
  height: var(--wall-item-height);
  width: var(--wall-item-width);
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  animation: scrolling var(--duration) linear infinite;
  cursor: pointer;
}
.wall[data-direction="reverse"] .wall-item {
  animation-direction: reverse;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.wall .wall-item:nth-child(1) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 1) * -1);
}
.wall .wall-item:nth-child(2) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 2) * -1);
}
.wall .wall-item:nth-child(3) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 3) * -1);
}
.wall .wall-item:nth-child(4) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 4) * -1);
}
.wall .wall-item:nth-child(5) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 5) * -1);
}
.wall .wall-item:nth-child(6) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 6) * -1);
}
.wall .wall-item:nth-child(7) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 7) * -1);
}
.wall .wall-item:nth-child(8) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 8) * -1);
}
.wall .wall-item:nth-child(9) {
  animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 9) * -1);
}
.wall:has(.wall-item:hover) .wall-item {
  animation-play-state: paused;
}